<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>PDF 查看器 + 注释 + 缩放 + html2canvas 导出 PDF</title>
    <link rel="stylesheet" href="./assets/css/spectre.min.css">
    <link rel="stylesheet" href="./assets/css/spectre-exp.min.css">
    <link rel="stylesheet" href="./assets/css/spectre-icons.min.css">
    <link rel="stylesheet" href="./css/pdf.css">
</head>

<body>

    <div id="toolbar" class="btn-group">
        <label class="btn btn-xs btn-primary" for="file-input">选择 PDF</label>
        <input type="file" id="file-input" accept="application/pdf" style="display: none;" />

        <button class="btn btn-xs" onclick="zoomOut()">缩小</button>
        <button class="btn btn-xs" onclick="zoomIn()">放大</button>
        <button class="btn btn-xs" onclick="resetZoom()">实际大小</button>

        <span id="zoom-indicator" class="zoom-info">
            <span class="icon-eye"></span> 100%
        </span>

        <button class="btn btn-xs btn-success" onclick="addAnnotation()">添加注释</button>
        <button class="btn btn-xs btn-info" onclick="exportToPDF()">导出为 PDF</button>
    </div>

    <div id="pdf-scroll-container">
        <div id="pdf-container"></div>
    </div>

    <script src="./assets/js/pdf.min.js"></script>
    <script>
        pdfjsLib.GlobalWorkerOptions.workerSrc = './assets/js/pdf.worker.min.js';
    </script>
    <script src="./assets/js/html2canvas.min.js"></script>
    <script src="./assets/js/pdf-lib.min.js"></script>
    <script src="./assets/js/interact.min.js"></script>
    <script src="./js/pdf.js"></script>

</body>

</html>